import axios from "axios";
import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";

interface Ilist {
    id: number,
    cover: string
}
function HotTags() {
    const navigate=useNavigate()
    function ToSearch() {
        navigate({ pathname: '/search' });
    }
    let [imglist, setimglist] = useState<Ilist[]>([
        { id: 1, cover: "http://gaga-images.paixin.com/photos2/2021/0409/607041dbbdcc4.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 2, cover: "http://gaga-images.paixin.com/photos2/2021/0407/606d093b83665.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 3, cover: "http://gaga-images.paixin.com/photos2/2021/0504/6090bddc947f3.jpeg?imageView2/2/w/632/h/389" },
        { id: 4, cover: "http://gaga-images.paixin.com/photos2/2021/0416/6078e7207c53b.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 5, cover: "http://gaga-images.paixin.com/photos2/2021/0522/60a8f9e6cce31.jpeg?imageView2/2/w/632/h/389" },
        { id: 6, cover: "http://gaga-images.paixin.com/photos2/2021/0409/607041dbbdcc4.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
        { id: 7, cover: "http://gaga-images.paixin.com/photos2/2021/0522/60a8f9e6cce31.jpeg?imageView2/2/w/632/h/389" },
        { id: 8, cover: "http://gaga-images.paixin.com/photos2/2021/0416/6078e71e327fe.jpeg-7mx_image2water?imageView2/2/w/632/h/389" },
    ]);
    useEffect(() => {
        axios.get('http://127.0.0.1:81/getdynamics').then(function (res) {
            console.log(res.data);
            setimglist(res.data.results)
        })
            .catch(function (error) {
                console.log(error);
            });

    }, [])
    function toDetailMain(id:number) {
        navigate({ pathname: '/DetailMain' },{state:id});
    }
    return (
        <div className="ContainerTag">
            <h1>热门标签</h1>
            <ul className="TagsList">
                <li > 纪实 </li>  /
                <li> 人像 </li>  /
                <li> 食品  </li> /
                <li> 动物  </li> /
                <li> 风光  </li> /
                <li> 街头  </li> /
                <li> 建筑  </li> /
                <li> 黑白  </li> /
                <li> 插画  </li>
            </ul>
            <ul className="TagsImg">
                {
                    imglist.map((item, index) => {
                        return (
            
                             <li key={index}>
                             <img src={item.cover} alt="" onClick={toDetailMain.bind(null, item.id)}/>
                        </li> )
                    })
                }
               
            </ul>
            <div className="activeBtn" onClick={ToSearch}>更多图片</div>
        </div>
    );
}
export default HotTags;